<script>
import { addUser } from '../../api/home';
import router from '../../router';
export default {
    data(){
        return{
            user:'',
            password:'',
            password2:'',

            // 姓名
            lc_teacher: '',
            // 所属区域
            lc_OwningRegion: '',
        }
    },
    methods:{
        register(){
            if(this.password === this.password2 && this.password != '' && this.user != ''){
                localStorage.setItem('teacher',this.lc_teacher)
                localStorage.setItem('OwningRegion',this.lc_OwningRegion)

                // 轻提示
                ElMessage({ message: '注册成功,已自动登录', type: 'success' });
                // 跳转首页
                router.push('/myHome');
            }else{
                // 账号或密码格式不正确
                ElMessage.error('账号或密码格式不正确');
            }
        }
    }
}


</script>

<template>
    <div class="box">
        <div class="box2">
            <div class="el-input2">
            账号：
            <el-input v-model="user" placeholder="请输入您的账号" clearable focus maxlength="11"/>
        </div>
        <div class="el-input2">
            姓名：
            <el-input v-model="lc_teacher" placeholder="请输入您的姓名"  clearable maxlength="16"/>
        </div>
        <div class="el-input2">
            所属区域：
            <el-input v-model="lc_OwningRegion" placeholder="请输入您的姓名"  clearable maxlength="16"/>
        </div>

        <div class="el-input2">
            密码：
            <el-input v-model="password" placeholder="请输入您的密码" type="password" clearable maxlength="16"/>
        </div>
        <div class="el-input2">
            再次确认密码：
            <el-input v-model="password2" placeholder="请再次输入您的密码" type="password" clearable maxlength="16"/>
        </div>

        <el-button @click="register">点击注册</el-button>
        </div>
    </div>
</template>



<style lang="scss" scoped>
html,body,.box{
    background-color:rgb(130, 200,250,0.8);
    height: 100%;
    width: 100%;
}
.box2 {
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:rgb(130, 200,250,0.8);
    height: 456px;
    width: 456px;
    padding: 10px 20px 30px 60px;
    box-sizing: border-box;

    .el-input2 {
        width: 70%;
        display: block;
        margin-bottom: 20px;
    }
    .el-button{
        width: 70%;
        margin-top: 10px;
    }
}
</style>
